<template>
  <div id="workflow-edit">
    <div class="workflow-steps">
      <div class="workflow-step pull-left" @click="handleClickStepOne">
        <div class="workflow-num">①</div>
        <div class="workflow-title">步骤1</div>
        <div class="workflow-describe">配置流程</div>
      </div>
      <div class="workflow-step pull-right" @click="handleClickStepTwo">
        <div class="workflow-num">②</div>
        <div class="workflow-title">步骤2</div>
        <div class="workflow-describe">流程节点配置</div>
      </div>
      <div class="fixclear"></div>
    </div>
    <div class="workflow-iframe" v-if="this.steps === 1">
      <iframe :src="this.URL" frameborder=0></iframe>
    </div>
    <div class="workflow-set" v-if="this.steps === 2">
      <div class="node-tree">
        <el-tree :data="NodeList" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"></el-tree>
      </div>
      <div class="node-content">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="配置按钮" name="1" v-show="node.type !== 'sequenceFlow' && node.type !== 'serviceTask' && node.type !== 'exclusiveGateway'">
            <div class="node-button">
              <el-button type="primary" size="small" @click="addButtonVisible = true">新增</el-button>
              <el-popover
                placement="top"
                width="160"
                v-model="visible">
                <p>确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="nodeButtonDelete">确定</el-button>
                </div>
                <el-button slot="reference" type="danger" size="small">删除</el-button>
              </el-popover>
              <div class="node-button-table">
                <el-table
                  ref="multipleTable"
                  :data="tableNodeButtonData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="type"
                    label="姓名"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>
                        <span v-if="scope.row.type === 1">同意</span>
                        <span v-if="scope.row.type === 2">驳回</span>
                        <span v-if="scope.row.type === 3">转办</span>
                        <span v-if="scope.row.type === 4">沟通</span>
                        <span v-if="scope.row.type === 5">留言</span>
                        <span v-if="scope.row.type === 6">加签</span>
                        <span v-if="scope.row.type === 9">分发</span>
                        <span v-if="scope.row.type === 10">反馈</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="配置表单" name="2" v-show="node.type !== 'sequenceFlow' && node.type !== 'serviceTask' && node.type !== 'exclusiveGateway'">
            <div class="node-form">
              <div class="node-form-button">
                <el-button type="primary" size="mini" @click="$router.push({path:'/formbuild'})">新建表单</el-button>
                <el-button type="primary" size="mini" @click="setFormModel">配置表单</el-button>
              </div>
              <el-table
                ref="formList"
                :data="formList"
                tooltip-effect="dark"
                style="width: 100%">
                <el-table-column
                    width="55"
                  >
                  <template slot-scope="scope">
                    <el-radio class="radio" v-model="formRadio" :label="scope.row.formKey"></el-radio>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="表单名称"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item title="配置变量" name="3" v-show="node.type === 'sequenceFlow' && node.type !== 'exclusiveGateway'">
            <div class="node-variable">
              <el-button type="primary" size="small" @click="addVariableVisibleClick">从表单添加</el-button>
              <el-button type="primary" size="small" @click="addFucnVisibleClick">从事件添加</el-button>
              <el-popover
                placement="top"
                width="160"
                v-model="variableVisible">
                <p>确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="variableVisible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="nodeVariableDelete">确定</el-button>
                </div>
                <el-button slot="reference" type="danger" size="small">删除</el-button>
              </el-popover>
              <div class="node-variable-table">
                <el-table
                  ref="tableNodeVariableData"
                  :data="tableNodeVariableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionVariableChange"
                  >
                  <el-table-column
                    type="selection"
                    width="55"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="描述"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="expression"
                    label="变量表达式"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="symbol"
                    label="逻辑运算符"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>
                        <span v-if="scope.row.symbol === 1">或</span>
                        <span v-if="scope.row.symbol === 0">且</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="配置审批人员" name="4" v-show="node.type !== 'sequenceFlow' && node.type !== 'serviceTask' && node.type !== 'exclusiveGateway'">
            <div class="node-people">
              <el-button type="primary" size="small" @click="addButtonPerson = true">新增</el-button>
              <el-popover
                placement="top"
                width="160"
                v-model="personVisible">
                <p>确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="personVisible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="nodePersonDelete">确定</el-button>
                </div>
                <el-button slot="reference" type="danger" size="small">删除</el-button>
              </el-popover>
              <div class="node-button-table">
                <el-table
                  ref="tableNodePersonData"
                  :data="tableNodePersonData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionPersonChange">
                  <el-table-column
                    width="55"
                  >
                    <template slot-scope="scope">
                      <el-radio class="radio" v-model="radio" :label="scope.row.id"></el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="userName"
                    label="人员名称"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="typeName"
                    label="人员类型"
                    align="center"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="配置驳回节点" name="5" v-show="node.type !== 'sequenceFlow' && node.type !== 'serviceTask' && node.type !== 'exclusiveGateway'">
            <div class="node-reject">
              <div class="node-reject-button">
                <el-button type="primary" size="mini" @click="setRejectNode">保存</el-button>
              </div>
              <div class="node-reject">
                <el-radio v-model="rejectNode" label="1">上一节点</el-radio>
                <el-radio v-model="rejectNode" label="2">发起人</el-radio>
                <el-radio v-model="rejectNode" label="3">归档</el-radio>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="配置节点事件" name="6" v-show="node.type !== 'sequenceFlow' && node.type !== 'serviceTask' && node.type !== 'exclusiveGateway'">
            <div class="node-reject">
              <div class="node-reject-button">
                <el-button type="primary" size="mini" @click="funcModelVisible = true">新增</el-button>
                <el-popover
                  placement="top"
                  width="160"
                  v-model="funcVisible">
                  <p>确定要删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="funcVisible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="nodeFuncDelete">确定</el-button>
                  </div>
                  <el-button slot="reference" type="danger" size="small">删除</el-button>
                </el-popover>
              </div>
              <el-table
                ref="formFuncList"
                :data="formFuncList"
                tooltip-effect="dark"
                @selection-change="handleFuncChange"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="55"
                >
                </el-table-column>
                <el-table-column
                  prop="eventName"
                  label="事件内容"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item title="配置服务" name="7" v-show="node.type === 'serviceTask' && node.type !== 'exclusiveGateway'">
            <div class="node-button">
              <el-button type="primary" size="small" @click="addServiceVisible = true">新增</el-button>
              <el-popover
                placement="top"
                width="160"
                v-model="serverVisible">
                <p>确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="serverVisible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="nodeServiceDelete">确定</el-button>
                </div>
                <el-button slot="reference" type="danger" size="small">删除</el-button>
              </el-popover>
              <div class="node-button-table">
                <el-table
                  ref="tableNodeServiceData"
                  :data="tableNodeServiceData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleServiceChange">
                  <el-table-column
                    type="selection"
                    width="55"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="服务"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="userName"
                    label="抄送人员"
                    align="center"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="fixclear"></div>
    </div>
    <el-dialog title="添加按钮" :visible.sync="addButtonVisible" @open="openAddButtonDialog">
      <el-form :model="addButtonForm" :rules="addButtonRules" ref="addButtonForm">
        <el-form-item label="名称" :label-width="addButtonformLabelWidth" prop="type">
          <el-select v-model="addButtonForm.type" placeholder="请选择">
            <el-option
              v-for="item in buttonOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" :label-width="addButtonformLabelWidth">
          <el-input v-model="addButtonForm.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addButtonVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitaddButtonForm('addButtonForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加变量" :visible.sync="addVariableVisible" @open="openAddVariableDialog">
      <el-form :model="addVariableForm" :rules="addVariableRules" ref="addVariableForm">
        <el-form-item label="表单选项" :label-width="addVariableformLabelWidth" prop="bdxx">
          <el-select v-model="addVariableForm.bdxx" placeholder="请选择" @change="changeVariableSelect">
            <el-option
              v-for="item in variableOptions"
              :key="item.id"
              :value="item.id"
              :label="item.fieldName"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变量表达式" :label-width="addVariableformLabelWidth">
          <el-input v-model="addVariableForm.expressionstart" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="" :label-width="addVariableformLabelWidth">
          <!-- <el-input v-model="addVariableForm.expressionsexec" autocomplete="off"></el-input> -->
          <el-select v-model="addVariableForm.expressionsexec" placeholder="请选择">
            <el-option
              v-for="item in ExpressionsexecList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" :label-width="addVariableformLabelWidth">
          <el-input v-model="addVariableForm.expressionend" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="addVariableformLabelWidth" prop="name">
          <el-input v-model="addVariableForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="逻辑运算符" :label-width="addVariableformLabelWidth" prop="symbol">
          <el-radio v-model="addVariableForm.symbol" label="1">或</el-radio>
          <el-radio v-model="addVariableForm.symbol" label="0">且</el-radio>
        </el-form-item>
        <el-form-item label="序号" :label-width="addVariableformLabelWidth" prop="sort">
          <el-input v-model="addVariableForm.sort" autocomplete="off" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVariableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitaddVariableForm('addVariableForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加人员" :visible.sync="addButtonPerson" @open="openAddPersonDialog">
      <el-form :model="addPersonForm" :rules="addPersonRules" ref="addPersonForm">
        <el-form-item label="常用人员类型" :label-width="addPersonFormLabelWidth" prop="type">
          <el-select v-model="addPersonForm.type" placeholder="请选择">
            <el-option
              v-for="item in personOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="addPersonForm.type === '5'" label="普通用户" :label-width="addPersonFormLabelWidth">
          <div style="width:30%;float:left">
            <el-tree :data="NodeOrgList" :props="defaultProps" @node-click="handleNodeOrgClick" :highlight-current="true"></el-tree>
          </div>
          <div style="width:70%;float:left">
            <el-table
              ref="tableNodePersonOrgData"
              :data="tableNodePersonOrgData"
              tooltip-effect="dark"
              style="width: 100%"
              >
              <el-table-column
                width="55"
              >
                <template slot-scope="scope">
                  <el-radio class="radio" v-model="addPersonForm.value" :label="scope.row.id"></el-radio>
                </template>
              </el-table-column>
              <el-table-column
                prop="userName"
                label="人员名称"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item v-if="addPersonForm.type === '6'" label="特定职位" :label-width="addPersonFormLabelWidth">
          <div style="width:30%;float:left">
            <el-tree :data="NodeOrgList" :props="defaultProps" @node-click="handleNodeOrgClick" :highlight-current="true"></el-tree>
          </div>
          <div style="width:70%;float:left">
            <el-table
              ref="tableBodePersonPositionData"
              :data="tableBodePersonPositionData"
              tooltip-effect="dark"
              style="width: 100%"
              >
              <el-table-column
                width="55"
              >
                <template slot-scope="scope">
                  <el-radio class="radio" v-model="addPersonForm.value" :label="scope.row.id"></el-radio>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="人员名称"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addButtonPerson = false">取 消</el-button>
        <el-button type="primary" @click="submitaddPersonForm('addPersonForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加表单" :visible.sync="formmodel">
      <el-form class="form-class" :model="addFormList" :rules="addPersonRules" ref="addPersonForm">
        <el-form-item>
          <div>
            <el-table
              ref="tableFormList"
              :data="tableFormList"
              tooltip-effect="dark"
              style="width: 100%"
              highlight-current-row
              @current-change="handleSelectionChangeF"
              >
              <!--<el-table-column-->
                <!--width="55"-->
              <!--&gt;-->
                <!--<template slot-scope="scope">-->
                  <!--<el-radio class="radio" v-model="addFormList.value" :label="scope.row.formKey"></el-radio>-->
                <!--</template>-->
              <!--</el-table-column>-->
              <el-table-column
                prop="name"
                label="表单名称"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination pull-right block">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total"
            ></el-pagination>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formmodel = false">取 消</el-button>
        <el-button type="primary" @click="setForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加节点事件" :visible.sync="funcModelVisible">
      <el-form class="form-class" :model="addFunc" :rules="addFuncRules" ref="addFunc">
        <el-form-item label="事件内容" :label-width="addButtonformLabelWidth" prop="name">
          <el-input v-model="addFunc.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="funcModelVisible = false">取 消</el-button>
        <el-button type="primary" @click="setFuncForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加事件变量" :visible.sync="addFucnVisible" @open="openAddFuncDialog">
      <el-form :model="addVariableForm" :rules="addVariableRules" ref="addVariableForm">
        <el-form-item label="表单选项" :label-width="addVariableformLabelWidth" prop="bdxx">
          <el-select v-model="addVariableForm.bdxx" placeholder="请选择" @change="changeVariableSelect">
            <el-option
              v-for="item in variableOptions"
              :key="item.id"
              :value="item.id"
              :label="item.eventName"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变量表达式" :label-width="addVariableformLabelWidth">
          <el-input v-model="addVariableForm.expressionstart" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="" :label-width="addVariableformLabelWidth">
          <!-- <el-input v-model="addVariableForm.expressionsexec" autocomplete="off"></el-input> -->
          <el-select v-model="addVariableForm.expressionsexec" :disabled="true" placeholder="请选择">
            <el-option
              v-for="item in ExpressionsexecList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" :label-width="addVariableformLabelWidth">
          <el-input v-model="addVariableForm.expressionend" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="addVariableformLabelWidth" prop="name">
          <el-input v-model="addVariableForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="逻辑运算符" :label-width="addVariableformLabelWidth" prop="symbol">
          <el-radio v-model="addVariableForm.symbol" label="1">或</el-radio>
          <el-radio v-model="addVariableForm.symbol" label="0">且</el-radio>
        </el-form-item>
        <el-form-item label="序号" :label-width="addVariableformLabelWidth" prop="sort">
          <el-input v-model="addVariableForm.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFucnVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitaddVariableForm('addVariableForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog class="service-dialog" title="添加服务" :visible.sync="addServiceVisible" @open="openAddServiceDialog">
      <el-form :model="addServiceForm" :rules="addServiceRules" ref="addServiceForm" label-width="150px">
        <el-form-item label="服务名称" :label-width="addPersonFormLabelWidth" prop="type">
          <el-select v-model="addServiceForm.type"  placeholder="请选择">
            <el-option
              v-for="item in ServiceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="抄送人员" :label-width="addPersonFormLabelWidth">
          <div style="width:30%;float:left">
            <el-tree :data="NodeOrgList" :props="defaultProps" @node-click="handleNodeOrgClick" :highlight-current="true"></el-tree>
          </div>
          <div style="width:70%;float:left">
            <el-table
              ref="tableNodeServiceOrgData"
              :data="tableNodeServiceOrgData"
              tooltip-effect="dark"
              style="width: 100%"
              @select="handleServiceChanges"
              @select-all="handleAllServiceChanges"
              >
              <el-table-column
                width="55"
                type="selection"
              >
              </el-table-column>
              <el-table-column
                prop="userName"
                label="人员名称"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addServiceVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitaddServiceForm('addServiceForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        URL:"",
        definitionKey:"",
        steps:1,
        activeNames: ['1'],
        NodeList: [],
        node:{},
        defaultProps: {
          children: 'items',
          label: 'name'
        },
        // 按钮部分的变量
        tableNodeButtonData:[],
        multipleSelection:[],
        visible: false,
        addButtonVisible:false,
        addButtonForm:{
          type:'',
          sort:'',
        },
        addButtonformLabelWidth: '120px',
        addButtonRules: {
          type: [
            { required: true, message: '请选择活动区域', trigger: 'change' },
          ]
        },
        buttonOptions:[
          { value:1, label:"同意" },
          { value:2, label:"驳回" },
          { value:3, label:"转办" },
          { value:4, label:"沟通" },
          { value:5, label:"留言" },
          { value:6, label:"加签" },
          { value:9, label:"分发" },
          { value:10, label:"反馈" },
        ],
        // 变量部分的变量
        tableNodeVariableData:[],
        variableSelection:[],
        variableVisible: false,
        addVariableVisible:false,
        addVariableForm:{
          bdxx:'',
          expressionstart:"",
          expressionsexec:"",
          expressionend:"",
          symbol:"1",
          sort:"",
        },
        addVariableformLabelWidth: '120px',
        addVariableRules: {
          bdxx: [
            { required: true, message: '请选择表单选项', trigger: 'change' },
          ],
          name: [
            { required: true, message: '请填写描述', trigger: 'blur' },
          ],
          sort: [
            { required: true, message: '序号', trigger: 'blur' },
          ],
          symbol: [
            { required: true, message: '请选择逻辑运算符', trigger: 'change' },
          ]
        },
        variableOptions:[],
        ExpressionsexecList:[
          { value:'==', label:"等于" },
          { value:'>', label:"大于" },
          { value:'<', label:"小于" },
          { value:'>=', label:"大于等于" },
          { value:'<=', label:"小于等于" },
          { value:'!=', label:"不等于" },
        ],
        // 人员配置部分变量
        tableNodePersonData:[],
        personSelection:[],
        personVisible:false,
        addButtonPerson:false,
        addPersonForm:{
          type:'',
          value:'',
        },
        personOptions:[
          { value:'0', label:"流程发起人" },
          { value:'4', label:"上级领导" },
          { value:'5', label:"普通用户" },
          { value:'6', label:"指定职位" },
        ],
        addPersonFormLabelWidth:"120px",
        radio:"",
        peopleRadio:"",
        orgTree:[],
        tableNodePersonOrgData:[],
        tableBodePersonPositionData:[],
        NodeOrgList:[],
        addPersonRules: {
          type: [
            { required: true, message: '请选择常用人员类型', trigger: 'change' },
          ]
        },
        jsonData: {"list":[{"type":"textarea","name":"多行文本","icon":"icon-diy-com-textarea","options":{"width":"100%","defaultValue":"","required":false,"pattern":"","placeholder":"","remoteFunc":"func_1550821261000_96456"},"key":"1550821261000_96456","model":"textarea_1550821261000_96456","rules":[]},{"type":"radio","name":"单选框组","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"选项1","label":"选项1"},{"value":"选项2","label":"选项2"},{"value":"选项3","label":"选项3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1550821263000_58756"},"key":"1550821263000_58756","model":"radio_1550821263000_58756","rules":[]}],"config":{"labelWidth":100,"labelPosition":"top","size":"small"}},
        editData: {},
        remoteFuncs: {

        },
        // form部分变量配置
        formRadio:"",
        formList:[],
        page:1,
        pageSize:10,
        total:1,
        formmodel:false,
        addFormList:{
          value:""
        },
        tableFormList:[],
        rejectNode:"1",
        // funcList
        formFuncList:[],
        funcModelVisible:false,
        funcVisible:false,
        addFunc:{
          name:""
        },
        addFuncRules:{
          name: [
            { required: true, message: '请输入时间内容', trigger: 'blur' },
          ]
        },
        funcClickList:"",
        addFucnVisible:false,
        addServiceRules:{
          type: [
            { required: true, message: '请选择服务类型', trigger: 'change' },
          ]
        },
        ServiceOptions:[
          { value:"com.redimybase.flowable.delegate.CopyTaskDelegate", label:"抄送" },
        ],
        addServiceForm:{
          type:"com.redimybase.flowable.delegate.CopyTaskDelegate",
          value:"",
        },
        tableNodeServiceOrgData:[],
        tableNodeServiceData:[],
        addServiceVisible:false,
        serverVisible:false,
        serviceClickPersonList:[],
        serviceClickList:"",
        allserviceClickList:[],
      }
    },
    mounted(){
      this.getWorkFlowContent();
      this.getTreeNodeList();
      this.getFormList();
    },
    methods:{
      getWorkFlowContent(){
        // this.$route
        let _this = this;
        console.log(this.$route.params.id)
        this.http.post('/api/flow/definition/detail',{
          id: this.$route.params.id
        })
        .then(res => {
          console.log(res);
          _this.definitionKey = res.data.data.definitionKey;
          let modelId = res.data.data.modelId;
          //_this.URL = "http://" + window.location.host + "/static/modeler/index.html#/editor/" + modelId;
           _this.URL = "http://" + window.location.host + "/admin/modeler/index.html#/editor/" + modelId;
          console.log(_this.URL)
        })
        .catch(err => {})
      },
      getTreeNodeList(){
        this.http.post('/api/flow/node/queryByDefinitionId',{
          definitionId: this.$route.params.id,
          type:'subProcess,userTask,sequenceFlow,exclusiveGateway,serviceTask'
        })
        .then((res) => {
          if(res.data.code === 200){
            this.NodeList = res.data.data;
          }
        })
        .catch(()=>{        })
      },
      // 步骤跳转
      handleClickStepOne() {
        this.steps = 1;
      },
      handleClickStepTwo() {
        this.steps = 2;
        this.getTreeNodeList();
      },
      handleChange(val) {
        console.log(val);
      },
      // 节点点击事件
      handleNodeClick(data) {
        console.log(data);
        let _this = this;
        this.node = data;
        if(data.type != "sequenceFlow"){
          this.http.post('/api/flow/button/query',{
            Q_COLUMN:'AND_node_id_EQ',
            Q_VALUE:data.id
          })
          .then(res => {
            let data = res.data.rows;
            this.tableNodeButtonData = data;
          });
          this.http.post("/api/flow/user/queryByNodeId",{
            nodeId:data.id
          })
          .then(res => {
            let data = res.data.data;
            this.tableNodePersonData = data;
          });
          this.http.post('/api/flow/form/query',{
            // definitionId: data.id,
            // type:'subProcess,userTask,sequenceFlow,exclusiveGateway'
            Q_COLUMN:'AND_node_id_EQ',
            Q_VALUE:data.id
          })
          .then(res => {
            console.log(res);
            let data = res.data.rows;
            this.formList = data;
          });
          this.http.post("/api/flowable/node/config/query",{
            Q_COLUMN:'AND_node_id_EQ',
            Q_VALUE:data.id
          })
          .then(res => {
            console.log(res);
            let data = res.data.rows;
            this.rejectNode = data[0].rejectNodeType.toString();
          });
          this.http.post("/api/flow/service/list", {
            // Q_COLUMN: "AND_node_id_EQ",
            // Q_VALUE: data.id
            nodeId:data.id
          })
          .then(res => {
            console.log(res)
            let data = res.data.data.records;
            this.tableNodeServiceData = data;
          });
          _this.getFucnList();
        }
        else{
          this.http.post("/api/flow/var/query", {
            Q_COLUMN: "AND_node_id_EQ",
            Q_VALUE: data.id
          })
          .then(res => {
            console.log(res)
            let data = res.data.rows;
            this.tableNodeVariableData = data;
          });
        }
      },
      handleNodeOrgClick(data){
        console.log(data);
        this.http.post("/api/user/getUserList",{
          orgId:data.id
        })
        .then(res => {
          console.log(res);
          let data = res.data.data.records;
          this.tableNodePersonOrgData = data;
          this.tableNodeServiceOrgData = data;
          for(let i=0;i<this.allserviceClickList.length;i++){
            this.$refs.tableNodeServiceOrgData.toggleRowSelection(this.serviceClickPersonList[i],true)
          }

        });
        this.http.post("/api/position/query",{
          Q_COLUMN: "AND_org_id_EQ",
          Q_VALUE: data.id
        })
        .then(res => {
          console.log(res);
          let data = res.data.rows;
          this.tableBodePersonPositionData = data;
        });
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val;
      },handleSelectionChangeF(val) {
        this.addFormList.value=val.formKey
        console.log(this.addFormList.value)

      },
      // 按钮配置部分方法
      openAddButtonDialog(){
        this.addButtonForm = {
          type:'',
          sort:'',
        }
      },
      nodeButtonDelete(){
        this.visible = false;
        let list = [];
        this.multipleSelection.map(item => {
          list.push(item.id);
        })
        console.log(list);
        list = list.join();
        this.http.post("/api/flow/button/deleteBatchIds",{
          ids:list
        })
        .then((res) => {
          this.$message.success(res.data.msg);
          if(res.data.code === 200){
            this.handleNodeClick(this.node);
          }
        })
      },
      submitaddButtonForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addButtonVisible = false;
            this.http.post("/api/flow/button/save",{
              type:this.addButtonForm.type,
              sort:this.addButtonForm.sort,
              nodeId:this.node.id
            })
            .then(res => {
              if(res.data.code === 200){
                this.$message.success(res.data.msg);
                this.handleNodeClick(this.node);
              }
              else{
                this.$message.error(res.data.msg);
              }
              console.log(res);
            })
          } else {
            return false;
          }
        });
      },
      // 变量配置部分方法
      openAddVariableDialog(){
        console.log("这个部分是变量的增加");
        this.addVariableForm = {
          bdxx:"",
          expressionstart:"",
          expressionsexec:"",
          expressionend:"",
          symbol:"1",
          sort:"",
        };
        // this.$refs['addVariableForm'].resetFields();
        this.http.post("/api/flow/definition/getStartFieldByDefinitionId",{
          definitionId:this.$route.params.id,
        })
        .then(res => {
          console.log(res);
          let data = res.data.data;
          this.variableOptions = data;
        });
      },
      addVariableVisibleClick (){
        this.addVariableVisible = true;
      },
      changeVariableSelect(value){
        console.log(value)
        for(let i=0;i<this.variableOptions.length;i++){
          if(this.variableOptions[i].id == value){
            console.log(this.variableOptions[i]);
            this.addVariableForm.expressionstart = this.variableOptions[i].model;
            return
          }
        }
      },
      nodeVariableDelete(){
        console.log("这个部分是变量的删除")
        this.variableVisible = false;
        let list = [];
        this.variableSelection.map(item => {
          list.push(item.id);
        })
        console.log(list);
        list = list.join();
        this.http.post("/api/flow/var/deleteBatchIds",{
          ids:list
        })
        .then((res) => {
          this.$message.success(res.data.msg);
          if(res.data.code === 200){
            this.handleNodeClick(this.node);
          }
        })
      },
      submitaddVariableForm(formName){
        console.log("这个部分是变量表单的提交")
        let _this = this;
        this.addVariableVisible = false;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.addVariableForm)
            this.addVariableVisible = false;
            let expression = this.addVariableForm.expressionstart + this.addVariableForm.expressionsexec + "'" + this.addVariableForm.expressionend + "'";
            console.log(expression);
            this.http.post("/api/flow/var/save",{
              bdxx:this.addVariableForm.bdxx,
              formField:this.addVariableForm.expressionstart,
              name:this.addVariableForm.name,
              expression:expression,
              symbol:this.addVariableForm.symbol,
              sort:this.addVariableForm.sort,
              nodeId:this.node.id
            })
            .then(res => {
              if(res.data.code === 200){
                this.$message.success(res.data.msg);
                _this.addVariableVisible = false;
                _this.addFucnVisible = false;
                _this.handleNodeClick(this.node);
              }
              else{
                this.$message.error(res.data.msg);
              }
            })
          } else {
            return false;
          }
        });
      },
      handleSelectionVariableChange(val){
        this.variableSelection = val;
      },
      // 人员配置部分方法
      handleSelectionPersonChange(val){
        this.personSelection = val;
      },
      openAddPersonDialog(){
        console.log("这个部分是人员的增加");
        this.addPersonForm = {
          type:'',
          value:'',
        };
        this.http.post("/api/flow/definition/getStartFieldByDefinitionId",{
          definitionId:this.$route.params.id,
        })
        .then(res => {
          console.log(res);
          let data = res.data.data;
          this.variableOptions = data;
        });
        this.http.post("/api/org/orgNodeList",{
          type:"user"
        })
        .then(res => {
          console.log(res);
          let data = res.data.data;
          this.NodeOrgList = data;
        })
      },
      nodePersonDelete(){
        this.http.post("/api/flow/user/delete",{
          id:this.radio
        })
        .then(res => {
          console.log(res);
          this.personVisible = false;
          this.$message.success(res.data.msg);
          this.handleNodeClick(this.node);
        })
      },
      submitaddPersonForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.addPersonForm.value == "" && this.addPersonForm.type == 6){
              this.$message.error("请选择正确的职位！");
              return
            }
            this.http.post("/api/flow/user/save",{
              type: this.addPersonForm.type,
              value: this.addPersonForm.value,
              nodeId:this.node.id
            })
            .then(res => {
              if(res.data.code === 200){
                this.$message.success(res.data.msg);
                this.handleNodeClick(this.node);
                this.addButtonPerson = false;
              }
              else{
                this.$message.error(res.data.msg);
              }
            })
          } else {
            return false;
          }
        });
      },
      // 表单配置功能
      getFormList(){
        this.http.post('/api/form/query',{
          P_NO:this.page,
          P_SIZE:this.pageSize
        })
        .then((res) => {
          let data = res.data;
          this.tableFormList = data.rows;
          this.total = data.records;
          // this.formmodel = false;
          // this.setState({formList: res.data.rows,total:res.data.records})
        })
        .catch(()=>{
          this.$message.error('获取表单数据失败！');
        })
      },
      handleCurrentChange(val){
        this.page = val;
        this.getFormList();
      },
      setForm(){
        let _this = this;
        console.log(this.node);
        if(this.node.id){
          console.log(this.addFormList.value)
          if(this.addFormList.value){
            // console.log(this.formRadio);
            this.http.post('/api/flow/form/save',{
              nodeId:this.node.id,
              formKey:this.addFormList.value
            })
            .then((res)=>{
              _this.handleNodeClick(this.node);
              this.$message.success(res.data.msg)
              this.formmodel = false;
            })
            .catch(()=>{
              this.formmodel = false;
              this.$message.error('保存节点表单失败！')
            })
          }
          else{
            this.$message.warning('请选择一个表单！')
          }
        }
        else{
          this.formmodel = false;
          this.$message.warning('请选择一个节点！')
        }
      },
      setFormModel(){
        this.formmodel = true;
      },
      deleteForm(){
        console.log("这个地方是删除！")
      },
      setRejectNode(){
        this.http.post("/api/flowable/node/config/save",{
          nodeId:this.node.id,
          rejectNodeType:this.rejectNode
        })
        .then(res => {
          console.log(res);
          this.$message.success(res.data.msg)
        })
      },
      // 配置事件添加
      getFucnList() {
        this.http.post("/api/flow/event/query",{
          Q_COLUMN:"AND_node_id_EQ",
          Q_VALUE:this.node.id
        })
        .then(res => {
          console.log(res);
          this.formFuncList = res.data.rows;
        })
      },
      setFuncForm() {
        let _this = this;
        this.http.post("/api/flow/event/save",{
          nodeId:this.node.id,
          eventName:this.addFunc.name,
          definitionKey:this.definitionKey,
        })
        .then(res => {
          console.log(res);
          this.$message.success(res.data.msg);
          this.funcModelVisible = false;
          _this.getFucnList();
        })
      },
      handleFuncChange(val) {
        console.log(val);
        let list = [];
        val.map(item => {
          list.push(item.id);
        });
        this.funcClickList = list.join();
      },
      nodeFuncDelete() {
        let _this = this;
        this.http.post("/api/flow/event/deleteBatchIds",{
          ids:this.funcClickList
        })
        .then(res => {
          this.$message.success(res.data.msg);
          this.funcVisible = false;
          _this.getFucnList();
        })
      },
      addFucnVisibleClick() {
        this.addFucnVisible = true;
      },
      openAddFuncDialog() {
        this.addVariableForm = {
          bdxx:"",
          expressionstart:"",
          expressionsexec:"==",
          expressionend:"",
          symbol:"1",
          sort:"",
        };
        this.http.post("/api/flow/event/query",{
          Q_COLUMN:"AND_definition_key_EQ",
          Q_VALUE:this.definitionKey
        })
        .then(res => {
          console.log(res);
          let data = res.data.rows;
          this.variableOptions = data;
          // this.formFuncList = res.data.rows;
        })
      },

      // ????
      handleServiceChanges(val,data){
        console.log(data);
        console.log(val);
        // let list = [];
        // this.allserviceClickList.push(val);
        if(this.allserviceClickList.length == 0){
          this.allserviceClickList.push(val);
        }
        else{
          if(this.allserviceClickList.indexOf(val) === -1){
            this.allserviceClickList.push(val)
          }
          else{
            this.allserviceClickList.splice(this.allserviceClickList.indexOf(val), 1);
          }
        }
        console.log(this.allserviceClickList);
        if(this.serviceClickPersonList.length == 0){
          this.serviceClickPersonList.push(data.id);
        }
        else{
          if(this.serviceClickPersonList.indexOf(data.id) === -1){
            this.serviceClickPersonList.push(data.id)
          }
          else{
            this.serviceClickPersonList.splice(this.serviceClickPersonList.indexOf(data), 1);
          }
        }
        console.log(this.serviceClickPersonList);
      },
      handleAllServiceChanges(selection){
        console.log(selection);
      },
      handleServiceChange(val) {
        console.log(val);
        let list = [];
        val.map(item => {
            list.push(item.id);
        });
        this.serviceClickList = list.join();
      },
      nodeServiceDelete() {
        let _this = this;
        this.http.post("/api/flow/service/deleteBatchIds",{
          ids:this.serviceClickList
        })
        .then(res => {
          this.$message.success(res.data.msg);
          this.serverVisible = false;
          this.handleNodeClick(this.node);
          // _this.getFucnList();
        })
      },
      openAddServiceDialog() {
        this.addServiceForm = {
          type:"com.redimybase.flowable.delegate.CopyTaskDelegate",
          value:'',
        };
        this.http.post("/api/org/orgNodeList",{
          type:"user"
        })
        .then(res => {
          console.log(res);
          let data = res.data.data;
          this.NodeOrgList = data;
        })
      },
      submitaddServiceForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.http.post("/api/flow/service/save",{
              serviceValue:this.serviceClickPersonList.join(),
              nodeId:this.node.id,
              name:"抄送",
              code:"copy",
              classPath:this.addServiceForm.type
            })
            .then(res => {
              console.log(res);
              this.$message.success(res.data.msg);
              this.addServiceVisible = false;
              this.handleNodeClick(this.node);
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>
<style lang="scss">
  #workflow-edit{
    // .el-radio__label{
    //   display: none !important;
    // }
    .node-form{
      .el-radio__label{
        display: none !important;
      }
    }
    .form-class{
      .el-radio__label{
        display: none !important;
      }
    }
    padding: 0 20px;
    .workflow-steps{
      padding-bottom: 5px;
      margin: 0 auto;
      width: 400px;
      .fixclear{
        clear: both;
      }
      .workflow-step{
        cursor: pointer;
        padding: 10px;
        .workflow-num{
          font-size: 26px;
        }
        .workflow-title{
          font-size: 14px;
          padding-top: 5px;
        }
        .workflow-describe{
          font-size: 12px;
          padding-top: 5px;
        }
      }
    }
    .workflow-iframe{
      iframe{
        min-height:750px;
        width:100%
      }
    }
    .pagination{
      padding-top: 15px;
    }
    .workflow-set{
      width: 100%;
      min-height: 750px;
      .node-tree{
        width: 20%;
        padding: 10px;
        border-right: 1px solid #CCC;
        float: left;
      }
      .node-content{
        width: 75%;
        float: right;
        .node-button{
          padding: 15px 0;
          .node-button-table{
            width: 100%;
          }
        }
      }
    }
    .service-dialog{
      .el-table__header-wrapper{
        display: none;
      }
    }
  }
</style>
